<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background: black;
        overflow: hidden;
      }

      .code-rain {
        font-size: 20px;
        color: #00ff00;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
      }

      .code-rain span {
        transition: all 0.1s;
      }

      .code-rain span:hover {
        color: #00ff00;
        transform: scale(1.5);
      }

      .code-rain span:active {
        color: #00ff00;
        transform: scale(1.5);
      }
    </style>
  </head>
  <body>
    <div class="code-rain" id="code-rain"></div>
  </body>
  <script>
    const codeRain = document.getElementById("code-rain");

    // 计算需要多少个 span 元素来填满屏幕
    const numberOfSpans = Math.floor(window.innerWidth / 20);

    for (let i = 0; i < numberOfSpans; i++) {
      const span = document.createElement("span");
      span.textContent = Math.random() > 0.5 ? "1" : "0";
      codeRain.appendChild(span);
    }
  </script>
</html>
